<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap-icons/bootstrap-icons.css">
    <script src="./bootstrap-4.6.2-dist/js/jquery-3.7.1.min.js"></script>
    <script src="./bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
</head>

<style>
    body {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        color: #333;
        line-height: 1.6;
    }

    a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s ease;
    }

    a:hover {
        color: #ffc107;
    }

    /* 导航栏 */
    .navbar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .navbar-brand {
        font-size: 2rem;
        font-weight: 700;
        color: #ffc107 !important;
    }

    .nav-link {
        margin: 0 0.5rem;
        font-weight: 500;
    }

    /* 登录界面 */
    .login-modal .modal-content {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .login-modal .modal-header {
        border-bottom: none;
    }

    .login-modal .form-control:focus {
        border-color: #ff6b00;
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.25);
    }

    .login-btn {
        background-color: #ff6b00;
        border-color: #ff6b00;
        transition: all 0.3s;
    }

    .login-btn:hover {
        background-color: #e65e00;
        transform: translateY(-2px);
    }

    .forgot-password {
        color: #666;
        font-size: 14px;
        transition: color 0.3s;
    }

    .forgot-password:hover {
        color: #ff6b00;
        text-decoration: underline;
    }

    .my-pills .nav-link.active {
        color: #000;
        font-weight: bolder;
        background-color: white !important;
        border-bottom: 2px solid #000;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-color: #007bff !important;
    }

    /* 二级导航（房型分类） */
    .sub-nav {
        background-color: #c6dbff;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #eee;
    }

    /* 主内容容器 */
    .container-main {
        padding: 1.5rem;
    }

    /* 左侧筛选栏 */
    .filter-box {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .filter-box h5 {
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .price-range-slider {
        margin: 0.5rem 0;
    }

    .btn-apply {
        background-color: #ffc107;
        border: none;
        padding: 0.5rem 1rem;
        margin-top: 1rem;
    }

    /* 右侧房型列表 */
    .room-list-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .room-card {
        border: 1px solid #eee;
        padding: 1rem;
        margin-bottom: 1.5rem;
        border-radius: 4px;
    }

    .room-card img {
        width: 100%;
        border-radius: 4px;
        margin-bottom: 1rem;
    }

    .room-rating {
        color: #fdbc30;
        margin-bottom: 0.5rem;
    }

    .room-price {
        font-size: 1.2rem;
        color: #ff5722;
        font-weight: 600;
    }

    .btn-book {
        background-color: #ffc107;
        border: none;
        padding: 0.5rem 1rem;
    }

    /*常见问题*/
    .dropdown-menu-left {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }

    /* 页脚 */
    footer {
        background-color: #0c2b4b;
        color: #fff;
    }


    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 800px;
            margin: 1.75rem auto;
        }
    }
</style>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href=" ">HUAN</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ml-auto d-flex justify-content-end">
                    <li class="nav-item"><a class="nav-link" href="./index.html">首页</a></li>
                    <li class="nav-item"><a class="nav-link active" href="#">客房</a></li>
                    <li class="nav-item"><a class="nav-link" href="./餐饮.html">餐饮</a></li>
                    <li class="nav-item"><a class="nav-link" href="./关于我们.html">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="tel:4008888888"><svg
                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-phone" viewBox="0 0 16 16">
                                <path
                                    d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" />
                                <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                            </svg>400 888 8888</a></li>
                    <li class="nav-item"><a class="btn btn-warning" href="./立即预定.html">立即预订</a></li>
                    <li class="nav-item mx-2 ms-auto"><a href="#loginModal" class="btn btn-primary"
                            data-toggle="modal">登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" data-dismiss="modal" class="close" aria-lable="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="row mt-5">
                        <div class="col">
                            <p> 扫码</p>
                            <img src="./img/1.gif" height="300px" width="300px" alt="">
                        </div>
                        <div class="col">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills my-pills" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home"
                                        type="button">账号登陆</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile"
                                        type="button">短信登陆</button>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content mt-3">
                                <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <form action="">
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control"
                                                placeholder="请输入账号/邮箱">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入密码">
                                        </div>
                                        <div class="form-group text-right">
                                            <a href="">忘记密码?</a>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <form action="">
                                        <div class="form-group small text-muted">
                                            验证即登录，未注册将自动创建账号
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入手机号">
                                        </div>
                                        <div class="form-group position-relative">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入验证码">
                                            <a class="position-absolute border-left px-2"
                                                style="right: 5px; top:5px">获取验证码</a>
                                        </div>
                                        <div class="form-group mt-5">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer  justify-content-between">
                    <div>
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-qzone.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-tsina.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-weixin.png" alt="">
                    </div>
                    <a href="">立即注册</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 二级导航（房型分类） -->
    <div class="sub-nav">
        <div class="container">
            <ul class="nav">
                <li class="nav-item"><a class="nav-link active" href="#">全部房型</a></li>
                <li class="nav-item"><a class="nav-link" href="#">标准客房</a></li>
                <li class="nav-item"><a class="nav-link" href="#">豪华套房</a></li>
                <li class="nav-item"><a class="nav-link" href="#">行政楼层</a></li>
                <li class="nav-item"><a class="nav-link" href="#">海景房</a></li>
                <li class="nav-item"><a class="nav-link" href="#">总统套房</a></li>
            </ul>
        </div>
    </div>
    <!-- 主内容区域 -->
    <div class="container container-main">
        <div class="row">
            <!-- 左侧筛选栏 -->
            <div class="col-md-3">
                <div class="filter-box">
                    <h5>筛选条件</h5>
                    <div class="form-group">
                        <label>价格区间</label>
                        <input type="range" class="custom-range" min="0" max="5000" value="2500">
                    </div>
                    <div class="form-group">
                        <label>房型</label>
                        <select class="form-control">
                            <option>大床房</option>
                            <option>双床房</option>
                            <option>套房</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>设施</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="wifi" id="wifi">
                            <label class="form-check-label" for="wifi">免费WiFi</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="breakfast" id="breakfast">
                            <label class="form-check-label" for="breakfast">早餐</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="pool" id="pool">
                            <label class="form-check-label" for="pool">游泳池</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="gym" id="gym">
                            <label class="form-check-label" for="gym">健身房</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="river" id="river">
                            <label class="form-check-label" for="river">沿江</label>
                        </div>
                    </div>
                    <button class="btn btn-apply">应用筛选</button>
                </div>
                <!-- 常见问题 -->
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        常见问题！！
                    </button>
                    <div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">预订后可以取消或修改吗？</a>
                        <a class="dropdown-item" href="#">入住和退房时间是什么时候？</a>
                        <a class="dropdown-item" href="#">酒店有哪些支付方式？</a>
                    </div>
                </div>
            </div>


            <!-- 右侧房型列表 -->
            <div class="col-md-9">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="room-list-title">精选房型</div>
                    <div class="text-muted">共12个房型 <a href="#">推荐排序</a></div>
                </div>

                <!-- 房型卡片1 -->
                <div class="room-card">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="./img/2.jpg" alt="豪华海景大床房">
                        </div>
                        <div class="col-md-8">
                            <h6 class="mb-1">豪华海景大床房</h6>
                            <div class="room-rating">★★★★☆ 4.5(128条评价)</div>
                            <p class="text-muted small">1.8米大床 免费WiFi 早餐 浴缸</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="room-price">¥1288<small class="text-muted">/晚</small></div>
                                <div>
                                    <button class="btn btn-sm btn-light mr-2">对比</button>
                                    <button class="btn btn-sm btn-book">立即预订</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 房型卡片2 -->
                <div class="room-card">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="./img/3.jpg" alt="行政豪华套房">
                        </div>
                        <div class="col-md-8">
                            <h6 class="mb-1">行政豪华套房</h6>
                            <div class="room-rating">★★★★★ 5.0(86条评价)</div>
                            <p class="text-muted small">2米特大床 免费WiFi 行政酒廊 按摩浴缸</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="room-price">¥2188<small class="text-muted">/晚</small></div>
                                <div>
                                    <button class="btn btn-sm btn-light mr-2">对比</button>
                                    <button class="btn btn-sm btn-book">立即预订</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 房型卡片3 -->
                <div class="room-card">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="./img/4.jpeg" alt="标准双床房">
                        </div>
                        <div class="col-md-8">
                            <h6 class="mb-1">标准双床房</h6>
                            <div class="room-rating">★★★★☆ 4.0(215条评价)</div>
                            <p class="text-muted small">1.2米双床 免费WiFi 早餐 液晶电视</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="room-price">¥788<small class="text-muted">/晚</small></div>
                                <div>
                                    <button class="btn btn-sm btn-light mr-2">对比</button>
                                    <button class="btn btn-sm btn-book">立即预订</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--页脚-->
    <footer>
        <div class="container">
            <div class="col text-center">
                <!-- 联系我们 -->
                <div class="col-md-12">
                    <h5>联系我们</h5>
                    <div class="contact-info">
                        <p>中国上海市浦东新区某路某号 1288 号</p>
                        <p>电话：400 888 8888</p>
                        <p>邮箱：1111111.com</p>
                    </div>
                </div>
                <!-- 版权与政策 -->
                <div class="col mt-4">
                    <div class="col-12 text-center">
                        <p class="mb-0">&copy; 2023 奢华酒店集团 版权所有</p>
                        <p class="mb-0">
                            <a href="#" class="mr-3">隐私政策</a>
                            <a href="#" class="mr-3">使用条款</a>
                            <a href="#">Cookie 政策</a>
                        </p>
                    </div>
                </div>
            </div>
    </footer>
</body>

</html>